<template>
  <div>
    <div id="options" ref="options" style="height:400px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'MixLine',
  data () {
    return {
      options: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.options.resize()
      }, 500)
    })
  },
  methods: {
    initChart () {
      this.options = echarts.init(this.$refs.options)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['室内温度', '回水温度', '供水温度']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']
        },
        yAxis: {
          type: 'value',
          min: 0,
          interval: 10
        },
        series: [
          {
            name: '室内温度',
            type: 'line',
            stack: '总量',
            data: [20, 32, 27, 34, 33, 30, 29, 20, 32, 27, 34, 33, 30, 29, 20, 32, 27, 34, 33, 30, 29, 37, 35, 32]
          },
          {
            name: '回水温度',
            type: 'line',
            stack: '总量',
            data: [22, 18, 19, 23, 29, 30, 31, 22, 18, 19, 23, 29, 30, 31, 22, 18, 19, 23, 29, 30, 31, 15, 12, 17]
          },
          {
            name: '供水温度',
            type: 'line',
            stack: '总量',
            data: [12, 16, 19, 20, 19, 23, 31, 12, 18, 19, 33, 29, 23, 31, 22, 20, 19, 23, 31, 12, 18, 19, 33, 18]
          }
        ]
      }

      this.options.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
